<%= form_with(model: [@user, @note],
  url: user_note_path(@user),
  local: true,
  remote: true,
  id: "note-form") do |form| %>
  <% if @note.errors.any? %>
    <details class="note-validation-error details-reset details-overlay" open>
      <summary></summary>
      <details-dialog class="box box--overlay d-flex flex-column anim-fade-in fast">
        <div class="box-body overflow-auto">
          <button class="btn-cancel" type="button" aria-label="Close dialog" data-close-dialog>
            <%= icon_tag "cancel" %>
          </button>
          <div class="mx-5 my-2">
            <div class="mb-4 text-center text-red">
              <p style="font-size: 32px"><%= icon_tag("error") %></p>
              <div class="mb-1 text-red">
                <strong><%= t(".Note publish failed, because there has count issues", count: @note.errors.count) %></strong>
              </div>
            </div>
            <ul class="ml-3">
              <% @note.errors.full_messages.each do |msg| %>
                <li><%= msg %></li>
              <% end %>
            </ul>
          </div>
        </div>
      </details-dialog>
    </details>
  <% end %>
  <div id="editor-form">
    <div class="editor-navbar">
      <div class="navbar-title">
        <%= logo_tag href: @user.to_path do %><span class="blue">Blue</span>Doc<% end %>
        <span class= "divider">/</span>
        <%= user_name_tag @user %>
        <span class= "divider">/</span>
        <a href="<%= @note.to_path %>" class="note-link"><%= @note.title || t(".New Note") %></a>
        <% if @note.private? %>
          <span class="label label-private icon-middle-wrap ml-2"><%= icon_tag("lock") %><%= t(".Private") %></span>
        <% end %>
        <span class="editor-message"></span>
      </div>
      <div class="navbar-buttons">
        <button type="submit" class="btn btn-primary"><%= t(".Publish") %></button>
        <%= react_component "notes/EditorSetting", {
          slug: @note.slug,
          description: @note.description,
          privacy: @note.privacy,
          prefix: user_notes_path(@user),
          saveURL: user_note_path(@user),
        } %>
      </div>
    </div>
  </div>
  <div class="editor-container">
    <%= react_component "Editor", {
      format: @note.format,
      title: @note.title,
      body: @note.body_plain,
      body_sml: @note.body_sml_plain,
      name: "note[body_sml]",
      markdownName: "note[body]",
      formatName: "note[format]",
      titleName: "note[title]",
      plantumlServiceHost: Setting.plantuml_service_host,
      mathJaxServiceHost: Setting.mathjax_service_host
    } %>
  </div>
<% end %>
